<template>
  <div class="tenantMenu_main main_container">
    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">

          <a class="right_button" @click="cleanTestData">
            <svg-icon icon-class="删除" />
            清除测试数据
          </a>
          <a class="right_button" @click="send">
            <svg-icon icon-class="导出" />
            配置下发
          </a>
          <HeaderOperation :parent="this" />
        </div>
      </div>
    </div>
    <div v-loading="loading" class="main_main">
      <SearchBar :parent="this" />
      <div ref="table_container" class="table_container">
        <el-table
          v-if="tableColumns.length>0"
          ref="table"
          :data="tableData"
          stripe
          border
          :height="tableHeight"
          style="width: 99.9%"
          @sort-change="(column)=>{sortChange(column, this)}"
          @selection-change="(val)=>{selectionChange(val, this)}"
        >
          <el-table-column type="selection" width="70" align="center" />
          <Column v-for="(column,index) in tableColumns" :key="index" :prop="column.prop" :is-show="column.isShow" :label="column.label" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth" />

          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.stop="edit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                @click.stop="deleteOne(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <pagination
        :total="total"
        :page.sync="pageData.pageNum"
        :limit.sync="pageData.pageSize"
        :selected-num="selectionsAll.length"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>
import { list, remove, send, cleanTestData } from '@/api/superManage/iotManage/iotConfiguration'
import AddOrUpdate from './addOrUpdate' // 新增或编辑页面
import { list as getCompany } from '@/api/superManage/tenantManage'
export default {
  name: 'Index',
  data() {
    return {
      loading: true,
      pageId: '设备配置', // 页面唯一标识
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      total: 1, // 数据一共有多少条
      mainId: 'id', // 表格行ID
      tableHeight: '0', // 表格高度
      tableData: [], // 表格数据
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      defaultTableColumns: [// 表格常规字段（初始值）
        { prop: 'statusName', label: '状态', minWidth: '80' },
        { prop: 'deviceId', label: 'IOT编码', minWidth: '220' },
        { prop: 'hostName', label: 'IOT名称', minWidth: '220' },
        { prop: 'iotType', label: 'IOT类型' },
        { prop: 'vpnIp', label: 'VPN IP' },
        { prop: 'netWorkingType', label: '联网方式' },
        { prop: 'hardwareVersion', label: '硬件版本号' },
        { prop: 'softwareVersion', label: '软件版本号' },
        { prop: 'customerName', label: '客户归属', minWidth: '220' },
        { prop: 'deviceName', label: '关联设备', minWidth: '180' },
        { prop: 'diskVolume', label: '硬盘(GB)' },
        { prop: 'memoryVolume', label: '内存(MB)' },
        { prop: 'cpuCore', label: 'CPU核心数' },
        { prop: 'cpuMaxFreq', label: 'CPU最高频率' },
        { prop: 'vpnInterface', label: 'VPN网卡名称' },
        { prop: 'netInterface', label: '网卡名称' },
        { prop: 'netIp', label: '网卡IP' },
        { prop: 'warnNum', label: '流量预警（MB）' },
        { prop: 'iccid', label: 'ICCID' }
      ],
      defaultSearchColumns: [// 搜索区常规字段（初始值）
        { prop: 'deviceId', label: 'IOT编码', type: 'input' },
        { prop: 'hostName', label: 'IOT名称', type: 'input' },
        { prop: 'deviceName', label: '关联设备', type: 'input' },
        { prop: 'vpnIp', label: 'VPN IP', type: 'input' },
        { prop: 'iotType', label: 'IOT类型', type: 'select', optionsName: 'iotTypeOptions' },
        { prop: 'customerId', label: '客户归属', type: 'select', optionsName: 'customerOptions' },
        { prop: 'status', label: '状态', type: 'select', optionsName: 'statusOptions', isShow: false },
        { prop: 'networkingType', label: '联网方式', type: 'select', optionsName: 'netWorkingTypeTions' }
      ],

      operationData: [ // 右上角的操作按钮
        { label: '批量删除', perm: '' },
        { label: '页面配置', perm: '' }
      ],

      statusOptions: [ // 选择组件数据源
        { value: undefined, label: '全部' },
        { value: '1', label: '已分配' },
        { value: '0', label: '未分配' }
      ],
      netWorkingTypeTions: [
        { value: undefined, label: '全部' },
        { value: '有线', label: '有线' },
        { value: '无线', label: '无线' },
        { value: '4G', label: '4G' }
      ],
      iotTypeOptions: [
        { value: undefined, label: '全部' },
        { value: 'CNC设备', label: 'CNC设备' },
        { value: 'PLC设备', label: 'PLC设备' },
        { value: '电表', label: '电表' },
        { value: 'TV', label: 'TV' },
        { value: '蓝牙网关', label: '蓝牙网关' },
        { value: '其他', label: '其他' }
      ],
      customerOptions: []
    }
  },
  mounted() {
    getCompany().then(res => {
      const cacheData = []
      res.data.forEach(item => {
        cacheData.push({
          value: item.id,
          label: item.name
        })
      })
      this.customerOptions = cacheData
    })
  },
  methods: {
    getList() {
      list(this.pageData).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.$nextTick(() => {
          this.setSelectRow(this)// 设置行选中
          this.tableHeight = this.$refs.table_container.offsetHeight
        })
      })
    },
    edit(row) {
      this.$layer.iframe({// 弹框
        content: {
          content: AddOrUpdate, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            defaultValue: row
          }// props
        },
        area: ['880px', '700px'],
        title: '编辑设备配置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    deleteOne(row) {
      const _this = this
      this.$confirm('确定要删除吗', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消', cancelButtonClass: 'cancelConfirm',
        type: 'warning'
      }).then(function() {
        remove({ deleteIds: row[_this.mainId] }).then(res => {
          _this.$message({
            message: res.msg,
            type: 'success'
          })
          _this.getList()
        })
      }).catch(() => {})
    },
    // 当前页的删除接口
    deleteMethod(deleteIds) {
      return remove({ deleteIds: deleteIds })
    },
    send() {
      if (this.selectionsAll.length == 0) {
        this.$message({
          message: '请先选择要操作的数据',
          type: 'warning'
        })
        return
      }
      if (this.selectionsAll.length !== 1) {
        this.$message({
          message: '仅支持单个配置下发',
          type: 'warning'
        })
        return
      }
      this.loading = true
      const ids = []
      this.selectionsAll.forEach(item => {
        ids.push(item.id)
      })
      send({ ids: ids.join(',') }).then(res => {
        if (res) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      }).finally(() => {
        this.loading = false
      })
    },
    cleanTestData() {
      const _this = this
      this.$confirm('确定要清除吗', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消', cancelButtonClass: 'cancelConfirm',
        type: 'warning'
      }).then(function() {
        cleanTestData().then(res => {
          _this.$message({
            message: res.msg,
            type: 'success'
          })
          _this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>

.right_button{
  color: #333333;
  padding: 0px 15px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  /deep/ .svg-icon{
    margin-right: 10px;
  }
}
.right_button:hover{
  background-color: rgba(56,123,252,.5);
  color: #fff;
}
</style>
